<template>
    <div id="addClass">
        <div class="publishBox">
            <div class="publishBackground"></div>
            <div class="addClasscontainer">
                <img src="../assets/closeRed.png"class="closeP" @click="closebox">
                <div class="head"><span>管理班级</span></div>
                <div class="body">
                    <el-row>
                        <el-col :span="7" class="left">
                            <div class="title">班级列表</div>
                            <ul >
                                <li class="classList" v-for="(val,index) in CName" @click= "choose(index)">
                                    <div class="classListDiv" >
                                        <div style="width:20%;float:left">{{val.ClassNum}}</div>
                                        <div style="width:55%;float:left;overflow:hidden;">{{val.ClassName}}</div>
                                        <div style="text-align:left;"><img src="../assets/redSmall.png" style="cursor:pointer;margin-right:0.3vw" @click="openBox(index,CName)"></div>
                                    </div>

                                </li>
                            </ul>
                            <div style="padding:10% 0 0 5%">

                                <input style="padding:0.4vw;font-size:1.1vw;width:3.5vw;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);" v-model="classNum_1" class="numInput" placeholder="课程代码">
                                <input style="margin:0 0 0 0.2vw;padding:0.4vw;font-size:1.1vw;width:7vw;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.2);" v-model="className_1" class="nameInput" placeholder="课程名称">

                                <div class="addDiv">
                                    <input style="cursor: pointer;" class="upload" ref="up_file" type="file"  @change="showName($event)">
                                </div>
                                <span class="daoru" style="font-size:1vw;text-decoration:underline; margin-right:0.2vw">{{reupload}}</span>
                                <span class="chuangjian" style="font-size:1vw;cursor: pointer;"  @click="addClass()">创建班级</span>
                                <div class="showFileName" ref="showFileName" >{{fileNameDiv}}</div>
                            </div>
                        </el-col>
                        <el-col :span="17" class="right">
                            <div class="tips" style="font-size:1.2vw;font-weight:lighter;text-align:center;padding-top:4%;">
                                <img>
                                导入的班级表必格须按照<span style="font-weight:bolder">学号/姓名/专业/联系方式</span>顺序！
                            </div>
                            <div class="tHead">
                                <table style="margin:0 0 0 0.6vw" width="96%" class="tTable" cellspacing="0" cellpadding="0">
                                    <thead >
                                        <tr>
                                            <th  width="27%">学号</th>
                                            <th width="16%">姓名</th>
                                            <th width="18%">专业</th>
                                            <th  width="28%">电话</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                        <!--模态框1-->
                        <div class="modal">
                          <el-popover
                            width="300"
                            v-model="visible">
                            <p >确定删除吗？</p>
                            <div style="text-align: right; margin: 0 ">
                              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                              <el-button type="primary" size="mini" @click="deleteClass">确定</el-button>
                            </div>
                          </el-popover>
                        </div>
                        <!--模态框2-->
                        <div class="modal_1">
                          <el-popover
                            width="300"
                            v-model="visible2">
                            <p>确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                              <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                              <el-button type="primary" size="mini" @click="deleteStudent()">确定</el-button>
                            </div>
                          </el-popover>
                        </div>

                            <div class="tableDiv" style="overflow-y:scroll;height:26vw;margin:0 0.8vw 0 0.6vw">
                                <table class="tTable" cellspacing="0" cellpadding="0" width="100%">
                                    <tbody>
                                        <tr  v-for="(stu,index) in stus" onMouseOver="this.className='Off'"  onmouseout="this.className='Up'">
                                            <td @click="" width="27%">{{stu.num}}</td>
                                            <td width="16%">{{stu.name}}</td>
                                            <td width="18%">{{stu.dep}}</td>
                                            <td width="28%">{{stu.tel}}</td>
                                            <td class="del" width="12%" style="font-weight:bold;text-decoration:underline;cursor:pointer;" @click="openBox_1(index,stus)">
                                                删除
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="addStu" >
                                <input style="padding:1%;font-size:1vw;width:17%;background:white;border:none;font-size:1vw;outline:none;" class="numInput" placeholder="学号" v-model="num_0">
                                <input style="padding:1%;margin:0 0 0 2%;font-size:1vw;width:10%;background:white;border:none;font-size:1vw;outline:none;" class="nameInput" placeholder="姓名" v-model="name_0">
                                <input style="padding:1%;margin:0 0 0 2%;font-size:1vw;width:10%;background:white;border:none;font-size:1vw;outline:none;" class="nameInput" placeholder="院系" v-model="dep_0">
                                <input style="padding:1%;margin:0 0 0 2%;font-size:1vw;width:18%;background:white;border:none;font-size:1vw;outline:none;" class="nameInput" placeholder="联系方式" v-model="tel_0">
                                <span  @click="addStu">添加学生</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
 import axios from 'axios'
    export default{
        data(){
            return{
                reupload:"导入班级信息",
                fileNameDiv:'',
                 //左边删除
                visible: false,
                index_1:'',
                row1_1:'',
                    //右边删除
                visible2: false,
                _index:'',
                _row:'',
                props:[
                    "message2"
                ],
              //左边添加班级
              path:"",
              classNum_1:"",
              className_1:"",
              courseName:"",
              //右边添加学生
                num_0:'',
                name_0:'',
                dep_0:'',
                tel_0:'',
                stus:[
                ],

              CName:[],
            }
        },
      props:[
              'courseMess'
      ],
      mounted: function () {
        var cMess=new Array();
        for(var i= 1;i<this.courseMess.length;i++){
            var coMess = {};
            var index = 0;
            for(var j=this.courseMess[i].length-1;j>=0;j--){       
                if('A'>this.courseMess[i].charAt(j)||this.courseMess[i].charAt(j)>'Z'){
                    index=j+1;
                    break;
                }
            }
            coMess.ClassNum = this.courseMess[i].substring(index,this.courseMess[i].length);
            coMess.ClassName = this.courseMess[i].substring(0,index);
            // coMess.ClassNum=this.courseMess[i].replace(/[^a-zA-Z]/g,'');
            // coMess.ClassName=this.courseMess[i].replace(/[a-zA-Z]/g,'');
            cMess.push(coMess);
       }
        console.log(this.courseMess);
           this.CName=cMess;
      },
        methods:{
            //选择班级对应相对的表
            choose(index){
                this.stus=[]
              var stuName = this.CName[index].ClassName+this.CName[index].ClassNum;
              this.courseName=stuName;
              console.log(stuName);
              var _this = this;
              var params = new URLSearchParams();
              params.append('course',stuName);
              let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              axios.post('/course/getStudent',params,config).then(function (res) {
                console.log(res.data);
                for(var i=0;i<res.data.Arr.length;i++){
                //向teacher右边的表，组件传递数据
                  var stuMess={};
                  stuMess.num = res.data.Arr[i].userID;
                  stuMess.name = res.data.Arr[i].userName;
                  stuMess.dep = res.data.Arr[i].major;
                  stuMess.tel = res.data.Arr[i].contact;
                  _this.stus.push(stuMess);

                }

              }).catch(function (err) {
                console.log(err);
              });
            },
          showName :function(event) {
            // console.log(this.$refs.up_file.value.split('\\'));
            this.path = event.target.files[0];
            var nameArr=this.$refs.up_file.value.split('\\');
            var filename=nameArr[nameArr.length-1];
            this.fileNameDiv=filename;
            this.reupload="重新上传",
              console.log(this.fileNameDiv);

          },
          //创建班级
            addClass(){
              var _this = this;
              var userID=localStorage.userID;
              var a=this.className_1;
              var b=this.classNum_1;
              var course_=this.className_1+this.classNum_1;
              var insertClass = new FormData();
                insertClass.append('fileName', this.path);
                insertClass.append('course',course_);
                insertClass.append('userID',userID);
                let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
             axios.post('/course/creatCourse',insertClass,config).then(function (res) {
                console.log(res.data);
                if(res.data.stauts=='success'){
                  _this.CName.push({
                    ClassNum:_this.classNum_1,
                    ClassName:_this.className_1
                  });
                  _this.classNum_1='';
                  _this.className_1='';
                  var class_={};
                  class_.name=a;
                  class_.num=b;
                  _this.$emit("listen",class_)
                  _this.$message({
                    message:'创建成功',
                    type:'success'
                  });

                }else {
                  _this.$message({
                    message:'创建失败',
                    type:'warning'
                  });
                  _this.classNum_1='';
                  _this.className_1='';

                }

             }).catch(function (err) {
                console.log(err);

 });
            },
            closebox(){
                    this.$emit("listenToChildEvent2",0)
            },
            openBox(index, rows){
                this.visible=true;
                this.index_1=index;
                this.row_1=rows;
            },
            deleteClass(){
              var _this = this;
              var params = new URLSearchParams();
              params.append('course',this.courseName);
              let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              axios.post('/course/deleteCourse',params,config).then(function (res) {
                console.log(res.data);
                console.log(_this.CName[_this.index_1]);
                _this.$emit("delete_",_this.CName[_this.index_1])
                _this.row_1.splice(_this.index_1,1);
              }).catch(function (err) {
                console.log(err);

              });
            this.visible=false;
            },
            deleteStudent()
            {
              var _this = this;
              var userID=this.stus[this._index].num;
              var params = new URLSearchParams();
              params.append('userID',userID);
              params.append('course',this.courseName);
              let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              axios.post('/course/pullStudent',params,config).then(function (res) {
                console.log(res.data);
              }).catch(function (err) {
                console.log(err);

              });
            this._row.splice(this._index,1);
            this.visible2=false;
            },
            openBox_1(index, rows) {
            this.visible2=true;
            this._index=index;
            this._row=rows;
            },
            addStu(){
              var _this = this;
              var userID=this.num_0;
              var params = new URLSearchParams();
              params.append('userID',userID);
              params.append('course',this.courseName);
              let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
              axios.post('/course/pushStudent',params,config).then(function (res) {
                console.log(res.data);
               if(_this.num_0!==""&&_this.name_0!==""){
                this.stus.unshift({
                  num:_this.num_0,
                  name:_this.name_0,
                  dep:_this.dep_0,
                  tel:_this.tel_0,
                });
                _this.num_0='';
                _this.name_0='';
                _this.dep_0='';
                _this.tel_0='';
              }else{
                _this.$message({
                  message:'必须填入学号和姓名',
                  type:'warning'
                });
              }

              }).catch(function (err) {
                console.log(err);

              });

            },
     },
    }
</script>
<style>


     /*#addClass input{  */

     /*#addClass input{

        -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;
    }*/
    ::-webkit-input-placeholder { /* WebKit browsers */
    font-size:50%;
    color:#c4c4c4
    }
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #addClass .addClasscontainer{
        width: 50%;
        background: #eeeeee;
        position: fixed;
        top: 10%;
        left:50%;
        margin-left: -25%;
        height: 40vw;
    }
    #teacher .publishBox .tableDiv{
        color:#6d6d6d;
        font-size: 1.1vw
    }
   #addClass .addClasscontainer .head{
       z-index: 1003;
        padding: 0.5vw 0 0.5vw 0;
        margin: 0;
        background: #434343;
        text-align: center;
        color: #ccc;
        box-shadow:0px 7px 10px rgba(0,0,0,0.6);
    }
   #addClass .addClasscontainer .left{
        border-right: #ccc solid 1px;
        height:36vw;
    }
    #addClass .addClasscontainer .right{
        height:36vw;
    }
   #addClass .addClasscontainer .left .title{
        padding: 6% 0 15% 5%;
        font-size: 2vw;
    }
    #addClass  .classList:hover{
        background: #ccc
    }
  #addClass  .addClasscontainer .left .classList .classListDiv{
        font-size: 1.2vw;
        text-align: center
    }
  #addClass  .addClasscontainer .left .classList img{
        margin: 0% 0 0 0;
        width: 0.8vw;
        height:0.8vw;
    }
    #addClass  .addClasscontainer .left .classList img:hover{
        height: 1.2vw;
        width: 1.2vw
    }
   #addClass .addClasscontainer .numInput{
        outline: none;
    }
   #addClass .addClasscontainer .addDiv{
        padding: 0.8vw 0 0 0 ;
        font-size: 1.2vw;
        position: relative;
        width:38%;
        text-decoration:none;
    }
    #addClass .upload{
        cursor: pointer;
        opacity: 0;
        position: absolute;
        width: 5.8vw;
        height: 1.6vw;
        overflow: hidden;
        top:1vw;
    }
    #addClass .showFileName{
        font-size: 0.1vw;
        margin: 0.7vw 0 0 0;
        color: gray
    }
    #addClass .addStu{
        padding: 1.5vw 0 0 1vw
    }
    #addClass .addStu input{
        font-size: 1vw;
        padding: 0 0 0 5%;
        box-shadow:  inset -2px -2px 10px  rgba(0,0,0,0.2);
    }
    #addClass .addStu span{
        text-decoration: underline;
        font-size: 1.2vw;
        padding:1%;
        margin:0 0 0 2%;
        cursor: pointer
    }
    #addClass .addStu span:hover{
        font-weight: bold;
        font-size: 1.3vw
    }
     #addClass .chuangjian:hover{
        font-weight: bold;
    }
    #addClass .daoru:hover{
        font-weight: bold;
    }
  #addClass .tHead{
      font-size: 1.3vw;
      font-weight:lighter;
      background: #e5e1e2;
      width: 96%;
      margin: 1vw 0 0 0.5vw;
      color: #6d6d6d;
  }
  #addClass .tableDiv{
      font-size: 1.3vw;
      text-align: center;
  }
  #addClass .tableDiv td {
      padding:0.4vw 0  0.4vw 0;
      border-bottom: 1 solid #ccc
  }
 #addClass .tableDiv table td{
     border-top: solid 1px #ccc;
    border-left: solid 1px #ccc
 }#addClass .del:hover{
     font-size: 1.3vw
 }
</style>
